<%@page import="entity.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
</head>
<link rel="stylesheet" href="bootStrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<body>
<div id="content4" class="content-body">
    <div class="user_table">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">用户列表</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">添加用户</a></li>
        </ul>
        <br/>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">
                <!--嵌套基础面板：处理用户列表面板-->
                    <div class="text-center">
                        <!--内联表单-->
                        <form class="form-inline" action="./userList" method="post" id="selectUsers" style="font-size: 18px">
                            <div class="form-group">
                                <label for="selectAccount">账号</label>
                                <input type="text" class="form-control" id="selectAccount" name="selectAccount" placeholder="229971210" value="${param.selectAccount }">
                            </div>
                            <div class="form-group">
                                <label for="selectName">姓名</label>
                                <input type="text" class="form-control" id="selectName" name="selectName" placeholder="Jane Doe" value="${param.selectName }">
                            </div>
                            <div class="form-group">
                                <label for="selectRole">角色</label>
                                <select class="form-control" id="selectRole" name="selectRole">
                                    <option value="" hidden>请选择</option>
                                    <option value="1" ${param.selectRole == '1' ? 'selected' : ''}>管理员</option>
                                    <option value="0" ${param.selectRole == '0' ? 'selected' : ''}>普通用户</option>
                                </select>
                            </div>
                            <button type="submit" class="btn btn-success">Send</button>
                            <button type="reset" class="btn btn-primary">Reset</button>
                        </form>
                    </div>
                    <!--栅格布局-->
                    <div class="row">
                        <div class="col-md-12">
                            <!--表格-->
                            <table class="table table-hover table-bordered" style="width: 100%">
                                <thead class="thead-light">
                                <tr>
                                    <th>#</th>
                                    <th>账号</th>
                                    <th>密码</th>
                                    <th>姓名</th>
                                    <th>头像</th>
                                    <th>角色</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:if test="${empty users }">
                                    <th colspan="8">暂无数据</th>
                                </c:if>
                                <c:if test="${!empty users }">
                                    <c:forEach var="user" items="${users }">
                                        <tr>
                                            <td style="white-space:nowrap;">${user.id}</td>
                                            <td style="white-space:nowrap;">${user.account }</td>
                                            <td style="white-space:nowrap;">${user.pwd }</td>
                                            <td style="white-space:nowrap;">${user.userName }</td>
                                            <td><img src="${user.headimg }"></td>
                                            <td style="white-space:nowrap;">
                                                <c:choose>
                                                    <c:when test="${user.role == 1}">
                                                        管理员
                                                    </c:when>
                                                    <c:when test="${user.role == 0}">
                                                        普通用户
                                                    </c:when>
                                                </c:choose>
                                            </td>

                                            <td style="white-space:nowrap;">${user.createTime }</td>
                                            <td style="white-space:nowrap;">
                                                <a href="./deleteUser?id=${user.id}" class="btn btn-danger btn-md">删除</a>
                                                <a href="#" class="btn btn-info btn-md" data-toggle="modal" data-target="#updateUserModal" onclick="getUserData(this)">修改</a>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                    <tr>
                                        <th colspan="8">${page }</th>
                                    </tr>
                                    <!-- 模态框（Modal） -->
                                    <div class="modal fade" id="updateUserModal" tabindex="-1" role="dialog" aria-labelledby="updateUserModalLabel" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header" style="background-color: #f5f5f5; border-top-left-radius: 5px; border-top-right-radius: 5px;">
                                                    <h5 class="modal-title" id="updateUserModalLabel">修改用户信息</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body" style="padding: 20px; background-color: #fff; font-size: 18px;font-family: 微软雅黑">
                                                    <!-- 表单内容 -->
                                                    <form method="post" action="./updateUser" id="updateForm" enctype="multipart/form-data" >
                                                        <div class="form-group">
                                                            <label for="account">账号</label>
                                                            <input type="text" class="form-control" id="account" name="account" readonly>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="pwd">密码</label>
                                                            <input type="text" class="form-control" id="pwd" name="pwd">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="userName">姓名</label>
                                                            <input type="text" class="form-control" id="userName" name="userName">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="headImg">头像</label>
                                                            <span id="headImg">
                                                                <img src="" id="avatar" class="avatar">
                                                                <input type="file" id="file-input" name="file-input">
                                                            </span>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="role">角色</label>
                                                            <select class="form-control" id="role" name="role">
                                                                <option  value="1">管理员</option>
                                                                <option  value="0">普通用户</option>
                                                            </select>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="createTime">创建时间</label>
                                                            <input type="text" class="form-control" id="createTime" name="createTime" readonly>
                                                        </div>
                                                    </form>
                                                </div>
                                                <div class="modal-footer" style="text-align: right;">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                                    <button type="button" class="btn btn-primary" onclick="updateUser()">保存</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </c:if>
                                </tbody>
                            </table>
                        </div>
                    </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
                <!--嵌套基础面板：处理用户列表面板-->
                <div class="panel panel-default">
                    <div class="panel-body">
                        <form method="post" action="./addUser" id="insertForm" style="width: 600px;margin: 0 auto">
                            <div class="form-group">
                                <label for="addAccount">账号</label>
                                <input type="text" class="form-control" id="addAccount" name="addAccount" placeholder="用户名">
                            </div>
                            <div class="form-group">
                                <label for="addPwd">密码</label>
                                <input type="password" class="form-control" id="addPwd" name="addPwd" placeholder="请输入密码">
                            </div>
                            <div class="form-group">
                                <label for="sureAddPwd">确认密码</label>
                                <input type="password" class="form-control" id="sureAddPwd" name="sureAddPwd" placeholder="再次输入密码">
                            </div>
                            <div class="form-group">
                                <label for="addUserName">姓名</label>
                                <input type="text" class="form-control" id="addUserName" name="addUserName" placeholder="请输入真实姓名">
                            </div>
                            <div class="form-group">
                                <label for="addRole">角色</label>
                                <select class="form-control" id="addRole" name="addRole">
                                    <option  value="1">管理员</option>
                                    <option  value="0">普通用户</option>
                                </select>
                            </div>
                            <button type="submit" class="btn btn-success">注册</button>
                            <button type="reset" class="btn btn-primary">重置</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-3.7.1.js"></script>
<script src="bootStrap/js/bootstrap.min.js"></script>
<script>
    // 获取所有修改按钮
    var updateBtns = document.querySelectorAll('.btn-info');

    // 遍历修改按钮，为每个按钮添加点击事件
    for (var i = 0; i < updateBtns.length; i++) {
        updateBtns[i].addEventListener('click', function() {
            // 获取当前行的数据
            var row = this.parentElement.parentElement;
            var account = row.cells[1].innerText;
            var pwd = row.cells[2].innerText;
            var userName = row.cells[3].innerText;
            var headImg = row.cells[4].querySelector('img').src;
            var role = row.cells[5].innerText;
            var createTime = row.cells[6].innerText;

            // 将数据填充到模态框中
            document.getElementById('account').value = account;
            document.getElementById('pwd').value = pwd;
            document.getElementById('userName').value = userName;
            document.getElementById('headImg').querySelector('img').src = headImg;
            if (role == "管理员"){
                document.getElementById('role').value = 1;
            }else{
                document.getElementById('role').value = 0;
            }
            document.getElementById('createTime').value = createTime;
        });
    }

    // 为模态框的保存按钮添加点击事件
    document.querySelector('.btn-primary').addEventListener('click', function() {
        // 提交修改后的数据
        document.getElementById('updateForm').submit();
        // 关闭模态框
        $('#updateUserModal').modal('hide');
    });

    //错误提示
    window.onload = function() {
        checkError();
    }
    function checkError() {
        var errorMsg = "${errorMsg}";
        if (errorMsg) {
            alert(errorMsg);
            <% session.removeAttribute("errorMsg"); %>
        }
    }
</script>
</body>
</html>
